<template>
  <el-card>
    <el-table :data="dataList" v-loading="loading" style="width: 100%">
      <el-table-column prop="pageAuthority" label="页面权限">
        <template #default="scope">
          <el-tag type="success">{{ scope.row.pageAuthority }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="btnAuthority" label="按钮权限">
        <template #default="scope">
          <el-tag type="info">{{ scope.row.btnAuthority }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template #default="scope">
          <el-button type="primary" size="small" @click="settingAuth(scope.row.pageAuthority,scope.row.account)"> 权限设置 </el-button>
          <el-button type="danger" size="small"> 删除 </el-button>
          <el-button type="danger" size="small"> 禁用 </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <AuthModal :visible="visible" :checked-keys="checkedKeys" @close="visible=false" :btnAuth="btnAuth" :account="accountNo" @reload="loadData"></AuthModal>
</template>

<script setup>
import { ref } from "vue";
import { useHttp } from "./hooks/useHttp";
import AuthModal from "./AuthModal.vue";
import { postAuthApi,setAuthApi } from "./api/system";
//获取菜单所有url--闭包结构
function collectUrls(tree) {
  const urls = [];
  function traverse(node) {
    if (node.url &&!node.children) {
      urls.push(node.url);
    }
    if (node.children) {
      node.children.forEach(child => traverse(child));
    }
  }
    tree.forEach((node) => traverse(node));
    return urls;
}
const checkedKeys=ref([])
let visible = ref(false);
let btnAuth = ref([]);
const accountNo=ref("")
let settingAuth = async (pageAuthority,account) => { 
  const {data: { list, btn }} = await postAuthApi(pageAuthority,account);  
  accountNo.value = account;
  //传值
  checkedKeys.value = collectUrls(list);
  btnAuth.value = btn;
  visible.value=true
};
let { dataList, loading,loadData } = useHttp("/permissionList");

</script>

<style lang="scss" scoped></style>
